<template>
    <div v-html="compiledMarkdown" class="markdown-container"></div>
</template>

<script>
import { ref, onMounted, defineComponent, nextTick } from 'vue';
// import { marked } from 'marked';

const scrollToTop = () => {
    const messages = document.querySelector('.messages-wrap');
    if (messages) {
        messages.scrollTop = messages.scrollHeight + 200;
    }
};


export default defineComponent({
    props: {
        source: String
    },
    setup(props) {
        const compiledMarkdown = ref('');

        onMounted(() => {
            if (props.source) {
                // 暂时取消md转换，保持格式统一
                // compiledMarkdown.value = marked(props.source);
                compiledMarkdown.value = props.source;
                nextTick(() => {
                    scrollToTop()
                })
            }
        });

        return {
            compiledMarkdown
        };
    }
});
</script>

<style>
.markdown-container {
    white-space: pre-wrap;
    line-height: 20px;
    width: 100%;
}

.markdown-container p,
.markdown-container ul,
.markdown-container ol,
.markdown-container h1,
.markdown-container h2,
.markdown-container h3,
.markdown-container h4,
.markdown-container h5,
.markdown-container h6 {
    margin-bottom: 6px;
}
</style>